<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  videoSrc: {
    type: String,
    default: '/static/splash-video.mp4'
  },
  fallbackDuration: {
    type: Number,
    default: 3000 // 如果视频无法播放，使用的默认持续时间
  },
  onFinish: {
    type: Function,
    default: () => {}
  }
})

const videoRef = ref(null)
const containerOpacity = ref(1)
const isVideoEnded = ref(false)
const isVideoError = ref(false)

// 视频播放结束处理函数
function handleVideoEnd() {
  isVideoEnded.value = true
  fadeOutAndFinish()
}

// 视频加载错误处理函数
function handleVideoError() {
  console.error('视频加载失败，使用备用方案')
  isVideoError.value = true
  
  // 使用定时器模拟视频播放时长
  setTimeout(() => {
    fadeOutAndFinish()
  }, props.fallbackDuration)
}

// 淡出并调用完成回调
function fadeOutAndFinish() {
  containerOpacity.value = 0
  setTimeout(() => {
    props.onFinish()
  }, 500) // 等待淡出动画完成
}

onMounted(() => {
  // 如果视频元素存在，添加事件监听
  if (videoRef.value) {
    // 有些平台可能不支持自动播放，添加点击事件作为备用
    document.addEventListener('click', () => {
      if (videoRef.value && videoRef.value.paused) {
        videoRef.value.play().catch(err => {
          console.error('视频播放失败:', err)
          handleVideoError()
        })
      }
    }, { once: true })
    
    // 尝试自动播放
    videoRef.value.play().catch(err => {
      console.error('自动播放失败:', err)
      // 不立即触发错误处理，等待用户交互
    })
  } else {
    // 如果视频元素不存在，直接使用备用方案
    handleVideoError()
  }
})
</script>

<template>
  <view 
    class="video-splash-container" 
    :style="{ opacity: containerOpacity }"
  >
    <video
      ref="videoRef"
      class="splash-video"
      :src="videoSrc"
      @ended="handleVideoEnd"
      @error="handleVideoError"
      controls="false"
      autoplay="true"
      muted="true"
      loop="false"
      object-fit="cover"
    ></video>
    
    <!-- 视频加载错误时显示的备用内容 -->
    <view v-if="isVideoError" class="fallback-content">
      <image 
        class="logo" 
        src="/static/logo.svg" 
        mode="aspectFit"
      />
      <view class="text-container">
        <text class="title">知录我&健康</text>
        <text class="subtitle">中医健康管家</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.video-splash-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
}

.splash-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fallback-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
}

.logo {
  width: 240rpx;
  height: 240rpx;
  margin-bottom: 40rpx;
}

.text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.subtitle {
  font-size: 32rpx;
  color: #666;
}
</style>